<template>
  <div class="tree-select-container">
    <el-select 
      v-model="selectValue" 
      placeholder="请选择"
      @change="handleChange"
      :disabled="disabled"
    >
      <el-option
        v-for="item in options"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { deptAllList } from '@/api/system/dept'
export default {
  props: {
    modelValue: {
      type: Number,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    deptType: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      selectValue: null,
      options: []
    }
  },
  watch: {
    modelValue(newVal, oldValue) {
      this.selectValue = newVal
    },
  },
  created() {
    this.getDeptAllList();
  },
  methods: {
    getDeptAllList() {
      deptAllList({ deptType: this.deptType }).then(res => {
        this.options = res.data || [];
        this.selectValue = this.modelValue;
      }).catch(err => {
        this.options = [];
      });
    },
    handleChange(val) {
      this.$emit('update:modelValue', Number(val));
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-select {
	width: 100% !important;
}
</style>